<template>
	<view class="hot-container">
		<view class="search-box" @click="onToSearch">
			<my-search placeholderText="巡检记录"></my-search>
		</view>
		<view class="tab-sticky">
			<my-tabs  :tabData="tabData"  :defaultIndex="currentIndex"  :config="{ textColor: '#333333' }"  @tabClick="tabClick" />
		</view>
		
		<view>
			<swiper class="swiper" 
			:current="currentIndex" 
			:style="{height:currentSwiperHeight + 'px'}" 
			@animationfinish="onSwiperEnd"
			@change="onSwiperChange"
			>
				<swiper-item  class="swiper-item" v-for="(tabItem,tabIndex) in tabData" :key="tabIndex">
					<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
					<block v-else>						
						<hot-list-item :class="'hot-list-item-' + tabIndex "  v-for="(item,index) in listData[currentIndex]" :key="index" :data="item" :ranking="index + 1" @click="onItemClick(item)"></hot-list-item>
					</block>	
				</swiper-item>
			</swiper>	
		</view>
	</view>
</template>

<script>
	import { getHotTabs,getHotListFromTabType } from 'api/hot.js'
	export default {
		data() {
			return {
				tabData:[],
				currentIndex:0,
				isLoading:true,
				listData:{},
				currentSwiperHeight:0,
				//缓存高度计算结果
				swiperHeightData:{},
				currentPageScrollTop:0
				
			}
		},
		created() {
			this.loadHotTabs()			
		},
		onPageScroll(res){
			this.currentPageScrollTop =res.scrollTop
		},
		methods:{
		 	 async loadHotTabs(){
				const { data:res } = await getHotTabs()
				this.tabData = res.list
				this.getHotListFromTab()
			},
			async getHotListFromTab(){				
					//如果没有获取到数据
					this.isLoading=true
					const id = this.tabData[this.currentIndex].id
					const { data:res } = await getHotListFromTabType(id)
					this.listData[this.currentIndex] =res.list
					this.isLoading=false
					setTimeout(async()=>{
					this.currentSwiperHeight=await this.getCurrentSwiperHeight()
					this.swiperHeightData[this.currentIndex] =this.currentSwiperHeight
					},100)
				
			},
			onItemClick(item){
				uni.navigateTo({ url:`/subpkg/pages/blog-detail/blog-detail?author=${item.user_name}&articleId=${item.id}` })
			},
      tabClick(index){
				this.currentIndex = index		
			},
			onToSearch(){
				//跳转到search-blog
				uni.navigateTo({ url:'/subpkg/pages/search-blog/search-blog' })
			},
			onSwiperChange(e){
				if(this.currentPageScrollTop > 130){
					//控制列表滚动位置
					uni.pageScrollTo({ scrollTop:130 })
					
				}
				this.currentIndex = e.detail.current
			},
			onSwiperEnd(){
				//判断缓存是否存在
				if(!this.listData[this.currentIndex]){
					this.getHotListFromTab()
					return 
				}
				//未return 则存在数据缓存，则存在高度缓存
				this.currentSwiperHeight=this.swiperHeightData[this.currentIndex]
				
			},
			getCurrentSwiperHeight(){
				let sum =0
				return new Promise((resolve,reject)=>{
					const query = uni.createSelectorQuery().in(this)
					query
					.selectAll(`.hot-list-item-${this.currentIndex}`)
					.boundingClientRect(res=>{						
						res.forEach(item=>{							
							sum += item.height
						})	
						console.log(res)
						resolve(sum)
										
						
					})
					.exec()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-container{
		background-color: $uni-bg-color;
		.logo{
			width:100%;
			height:80px;
		}
		.search-box{
			padding:0 16px;
			margin-bottom: $uni-spacing-col-base;
		}
		.tab-sticky{
			position: sticky;
			z-index: 99;			
			/* #ifndef H5 || APP-PLUS */
			top:0
			/* #endif */
			/* #ifdef H5  || APP-PLUS */
			top:44px
			/* #endif */
		}
	}

</style>
